<template>
	<view :style="{backgroundColor:'#f8f8f8', height: bodyHeight + 'rpx'}">
		<view class="search-box">
			<u-search :maxlength="20" placeholder="请输入关键词" height="40" shape="square" v-model="reqProjData.projName"
				@clear="showContrl" @search="doSearch" @custom="doSearch"></u-search>
		</view>
		<text v-if="historyShowOcc" class="occ-box">开始搜索吧！</text>
		<view v-show="historyShow">
			<view class="title">
				<text>历史搜索</text>
				<u-tag text="清空" @click="clear" type="success" plain></u-tag>
			</view>
			<view class="history-box">
				<text class="hist-item" v-for="(i,index) in historyArr" @click="doSearch(i)" :key="index">{{i}}</text>
			</view>
		</view>

		<at-projcard-list v-show="cardshow" @getProjId="toProjdetail" :reqProjData="reqProjData" :projList="projList" :loading="false"
			 type="1" :nomore="unLoading" :scrollHeight="contHei"></at-projcard-list>
		<view v-show="eimgShow">
			<image src="/static/imgs/noSeach.png" class="empty-img"></image>
		</view>

	</view>
</template>

<script>
	import {
		projlist,
		burryPoint
	} from '@/common/http.api.js'
	import AtProjcardList from '@/components/AtProjcardList'
	export default {
		components: {
			AtProjcardList
		},
		data() {
			return {
				historyShowOcc: false,
				cardshow: false,
				historyShow: true,
				eimgShow: false,
				timer: null,
				contHei: 500,
				bodyHeight: 500,
				unLoading: 0,
				projList: [],
				historyArr: [],
				reqProjData: {
					schoolId: uni.getStorageSync('schoolId'),
					sortId: '',
					department: '',
					grade: '',
					projName: '',
					grade: '',
					limit: 8,
					page: 1,
					num: [0, 100]
				},
			}
		},
		onLoad() {
			this.setboxHeight()
			this.historyArr = JSON.parse(uni.getStorageSync('historyArr')|| '[]').reverse()
			if (this.historyArr.length === 0) {
				this.historyShow = false
				this.historyShowOcc = 1
			} else {
				this.historyShow = true
				this.historyShowOcc = false
			}
		},
		methods: {
			toProjdetail(id){
				uni.navigateTo({
					url:`/pages/projDetail/projDetail?id=${id}`
				})
			},
			clear() {
				uni.setStorageSync('historyArr', '[]')
				this.$nextTick(() => {
					this.historyArr = []
					this.historyShow = false
					this.historyShowOcc = true
				})

			},
			showContrl() {
				this.eimgShow = false
				this.cardshow = false
				if (this.historyArr.length === 0) {
					this.historyShow = false
					this.historyShowOcc = true
				} else {
					this.historyShow = true
					this.historyShowOcc = false
				}
			},
			setboxHeight() {
				this.bodyHeight = uni.$bodyHeight
				this.contHei = uni.$screenHeight - uni.$topFixedHeight  -130
			},
			doSearch(str) {
				if (this.timer) clearTimeout(this.timer)
				this.reqProjData.projName = str ? str : this.reqProjData.projName
				uni.$loading()
				// 控制相关页面显示与隐藏
				this.eimgShow = false
				this.historyShowOcc = false
				this.historyShow = false
				this.cardshow = true
				this.setHistoryArr()
				this.timer = setTimeout(async () => {
					const res = await projlist(this.reqProjData)
					// if (res.data.length < this.reqProjData.limit) this.unLoading ++
					if (res.data.length === 0) {
						this.eimgShow = true
						// this.unLoading ++
					}
					this.projList = res.data
					if(this.projList.length !== 0){
						console.log(this.projList);
						this.projList.forEach(async item =>{
						await burryPoint({projId:item.projId,num:1})
						})
					}
					
					this.historyArr.reverse()
				}, 800)
			},
			setHistoryArr() {
				// 缓存历史记录
				this.historyArr.push(this.reqProjData.projName)
				this.historyArr = [...new Set(this.historyArr)]
				this.historyArr = this.historyArr.filter((s) => s && s.trim())
				uni.setStorageSync('historyArr', JSON.stringify(this.historyArr))
			}
		},
	}
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		margin: 15rpx auto;
		width: 95%;
		display: flex;
		justify-content: space-between;
	}

	.occ-box {
		display: block;
		font-weight: bold;
		font-size: 18px;
		width: 100%;
		margin-top: 30rpx;
		text-align: center;
		color: #b0b2b6;
	}

	.history-box {
		position: relative;
		margin: auto;
		width: 96%;
		display: flex;
		flex-wrap: wrap;

		.hist-item {
			display: block;
			border: 1rpx solid #eee;
			border-radius: 5rpx;
			padding: 10rpx;
			margin: 0 25rpx 15rpx 0;
			color: #555555;
			font-size: 13px;
			background-color: #fff;
		}
	}

	.search-box {
		padding: 15rpx;
	}

	.empty-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9;
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
	}
</style>
